<template>
	<!-- 20230203 -->
	<view class="user-address-edit-page bg-ff">
		<!-- 页面内容 -->
		<view class="page-content">
			<view class="padding-lr-30">
				<view class="bg-ff bg-shadow radius-40 padding-30">
					<view class="line-height-100 flex align-center border-bottom-ed">
						<text class="text-28">收货人姓名</text>
						<input class="margin-left-30 flex-one text-28 text-right" v-model="detail.name" type="text"
							placeholder="请填写收货人姓名" placeholder-class="text-28 text-aa">
						<text class="tyIcon-arrow-right text-24 text-77"></text>
					</view>
					<picker class="width-100p" name="gender" :range="genderList" range-key="name" :value="genderIndex"
						@change="genderChange">
						<view class="line-height-100 flex align-center border-bottom-ed">
							<text class="text text-28">性别</text>
							<view class="text-28 flex-one text-right" :class="detail.sex?'':'text-aa'">
								{{detail.sex==1?'男':detail.sex==0&&detail.sex==0!=''?'女':'请选择'}}
							</view>
							<text class="tyIcon-arrow-right text-24 text-77"></text>
						</view>
					</picker>
					<view class="line-height-100 flex align-center border-bottom-ed">
						<text class="text text-28">手机号码</text>
						<input class="margin-left-30 flex-one text-28 text-right" maxlength="11" v-model="detail.phone" type="number"
							placeholder="请填写手机号码" placeholder-class="text-28 text-aa">
						<text class="tyIcon-arrow-right text-24 text-77"></text>
					</view>

					<view class="line-height-100 flex align-center border-bottom-ed">
						<text class="text text-28">所在地区</text>
						<view class="margin-left-30 flex-one text-right">
							<ty-bar-area :value="districtValue" @confirm="districtConfirm"></ty-bar-area>
						</view>
					</view>

					<view class="line-height-100 flex align-center border-bottom-ed">
						<text class="text text-28">详细地址</text>
						<input class="margin-left-30 flex-one text-28 text-right" v-model="detail.address" type="text"
							placeholder="请输入详细地址" placeholder-class="text-28 text-aa">
						<text class="tyIcon-arrow-right text-24 text-77"></text>
						<!-- <text class="margin-left-30 tyIcon-location-line text-40 text-1a" @click="location"></text> -->
					</view>

					<view class="line-height-100 flex align-center justify-between">
						<text class="text text-28">设为默认</text>
						<text class="margin-left-30"
							:class="detail.is_default == 0 ? 'tyIcon-round text-40 text-cc' : 'tyIcon-round-check text-40 text-1a'"
							@click="clickDefault"></text>
					</view>
				</view>

				<!-- 底部条 -->
				<view class="btns width-100p padding-lr-30">
					<view class="line-height-80 radius-40 bg-1a text-center text-30 text-bold text-ff" @click="submit">
						{{addressId ? '确认' : '保存'}}
					</view>
					<view class="margin-top-20 line-height-80 radius-40 border-cc text-center text-28 text-4d"
						@click="del" v-if="addressId">删除地址</view>
				</view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">

		</view>
	</view>
</template>
<script>
	import user from "../api/user.js"
	export default {
		data() {
			return {
				// 行政规划省市区ID
				districtValue: ['', '', ''],
				// 地址ID
				addressId: '',
				// 我的地址
				detail: {
					id: '',
					linkman: '',
					phone: '',
					province_id: 1,
					city_id: 101,
					area_id: 1001,
					address: '',
					lat: '',
					lng: '',
					// 是否默认地址 0--不默认勾选默认地址 1--默认勾选默认地址
					is_default: 0,
					sex: ''
				},
				genderIndex: -1,
				// 性别下拉列表
				genderList: [{
					id: 1,
					name: '男'
				}, {
					id: 0,
					name: '女'
				}],
			}
		},

		onLoad(options) {
			this.addressId = options.id || 0

			// 设置标题
			if (!this.addressId) {
				this.cn.setTitle('新增收货地址')
			}
		},

		onReady() {
			// 编辑页面
			if (this.addressId) {
				this.rq.getData('address/address_info', {
					id: this.addressId
				}).then(res => {
					// 详情
					this.detail = res.data
					// 省市区
					this.districtValue = [
						res.data.province_id,
						res.data.city_id,
						res.data.area_id
					]
					console.log(this.districtValue)
				})
				// 新增页面
			} else {
				// user.address.isHasAddress().then(res => {
				// 	if (res.code == 0) {
				// 		// 没有添加过地址默认选中默认地址
				// 		if (res.data.is_has_address == 0) {
				// 			this.detail.is_default = 1
				// 		}
				// 	}
				// })
			}
		},

		methods: {
			/**
			 * 切换默认
			 * @param {Object} e
			 * @date 2023-02-03
			 */
			clickDefault() {
				this.detail.is_default = this.detail.is_default == 0 ? 1 : 0
			},

			/**
			 * 省市区确认
			 * @param {Object} e
			 * @date 2023-02-03
			 */
			districtConfirm(e) {
				this.detail.province_id = e.province_id
				this.detail.city_id = e.city_id
				this.detail.area_id = e.area_id
			},

			/**
			 * 定位
			 * @date 2023-02-03
			 */
			location() {
				uni.chooseLocation({
					success: (res) => {
						this.detail.lat = res.latitude
						this.detail.lng = res.longitude
						this.detail.address = res.name
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},

			/**
			 * 提交地址
			 * @date 2023-02-03
			 */
			submit() {
				if (!this.detail.name) {
					this.cn.toast('请填写收货人姓名')
					return false
				}
				if (!this.detail.phone) {
					this.cn.toast('请填写手机号码')
					return false
				}
				if (!this.detail.address) {
					this.cn.toast('请填写详细地址')
					return false
				}
				this.rq.getData('address/saveAddress', {
					address: this.detail.address,
					name: this.detail.name,
					phone: this.detail.phone,
					sex: this.detail.sex,
					province_id: this.detail.province_id,
					city_id: this.detail.city_id,
					district_id: this.detail.area_id,
					is_default: this.detail.is_default,
					id: this.addressId == 0 ? '' : this.addressId
				}).then(res => {
					if (res.code == 1) {
						this.cn.toast('保存成功')
						setTimeout(res => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			genderChange(e) {
				this.detail.sex = this.genderList[e.detail.value].id
			},
			/**
			 * 删除地址
			 * @date 2023-02-03
			 */
			del() {
				this.cn.confirm('确定删除该地址').then(res => {
					if (res.confirm) {
						this.rq.getData('address/del_address', {
							id: this.addressId
						}).then(res => {
							if (res.code == 1) {
								this.cn.toast(res.msg)
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			}
		}
	}
</script>
<style scoped>
	.user-address-edit-page {
		width: 100%;
		min-height: 100vh;
	}

	.text {
		width: 115rpx;
	}

	.btns {
		position: fixed;
		left: 0;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
	}
</style>